<template>
    <QuillEditor ref="quillRef" v-model:content="content" :options="myOptions" contentType="html" @update:content="setValue()"/>
</template>

<script setup lang="ts">
  import { ref, watch} from 'vue'
  import store from '@/store/index.js'  
  const { proxy } = getCurrentInstance();
   
  import { imageUpload } from '@/api/index' //引入上传图片的api
  import { QuillEditor, Quill } from '@vueup/vue-quill'
  //图片压缩
  import Compressor from 'compressorjs';
  import '@vueup/vue-quill/dist/vue-quill.snow.css' 
  import 'quill-image-uploader/dist/quill.imageUploader.min.css';
   
  import ImageUploader from 'quill-image-uploader';
  import BlotFormatter from 'quill-blot-formatter'
  
  //是不是第一次赋值
  const firstSetValue=ref(true)
   
  const props = withDefaults(defineProps<{
      modelValue: any, // 双向绑定值
  }>(), {
      modelValue: '', // 双向绑定值
  })
  const emit = defineEmits<{
      (e: 'update:modelValue', val: any): void
  }>()
  const content = ref<string>('')
  const quillRef = ref<any>(null)
   
 
  
 let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
 Quill.imports['attributors/style/size'].whitelist = fontSize;
 Quill.register(Quill.imports['attributors/style/size']);
 
  Quill.register("modules/imageUploader", ImageUploader);
  Quill.register('modules/blotFormatter', BlotFormatter);
   
  //富文本配置项，将模块功能一起写入到配置项内，也可以单独配置Modules
  const myOptions = reactive({
      modules: {
          toolbar: [ //自定义toolbar，或者可以通过essential ,minimal ,full ,以及"" 使用默认选项
              [{ 'align': [] }],
              [{ size: fontSize}],   // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
              ['image'],
              [{ 'direction': 'rtl' }],
              [{ 'color': [] }, { 'background': [] }], 
              ['clean']
          ],
          // 上传图片
          imageUploader: {
              upload: async (file: any) => {
                  try {
                      const compressedFile: any = await compressImage(file); // 压缩图片
                      return new Promise((resolve, reject) => {
                          const formData = new FormData();
                          formData.append("file", compressedFile);
                          imageUpload(formData).then((res: any) => {
                              resolve(res.data.image_url);
                          }).catch(err => {
                              reject("文件上传失败");
                              console.error("Error:", err)
                          })
                      })
                  } catch (error) {
                      console.error('压缩和上传图像时出错:', error);
                  }
              }
          },
          // 图片缩放
          blotFormatter: {
          },
      },
      placeholder: '请输入内容...'
  })
   
  // 图片压缩
  const compressImage = (file: any) => {
      return new Promise((resolve, reject) => {
          new Compressor(file, {
              quality: 0.6, // 设置压缩质量
              maxWidth: 400, // 设置图片最大宽度
              maxHeight: 400, // 设置图片最大高度
              success(result) {
                  resolve(result);
              },
              error(error) {
                  reject(error);
              },
          });
      });
  }
   
  const setValue = () => { //用于设置双向绑定值
      const text = toRaw(quillRef.value).getHTML()
      emit('update:modelValue', text)
  }
   
  watch(() => props.modelValue, (val: any) => { 
      if (val) {
         content.value = val //用于监听绑定值进行数据回填
        //第一次赋值
          if(firstSetValue.value){
            //还原值
            toRaw(quillRef.value).setHTML(val)
            firstSetValue.value=false
          }          
           
      } else { 
          toRaw(quillRef.value).setContents('') //可用于弹窗使用富文本框关闭弹窗清除值
      }
  })  
 
</script>

<style>
 .ql-container { 
     height: calc(100% - 42px);
 }
 
 
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
  
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
   content: '10px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
   content: '12px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
   content: '14px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
   content: '16px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
   content: '20px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
   content: '24px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
   content: '36px';
 }
 
 
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5";
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6";
 }
 
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体";
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体";
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";
 }
</style>
